<template>
<div style="margin: 10px 0 0 10px">
  <el-card style="height: 800px">
    <el-row>
      <el-col span="12">
        <div>
          <span style="margin-right: 25px">计量单位：</span>
          <el-input
              placeholder="请输入计量单位查询"
              v-model="input1"
              size="mini"
              style="width: 300px">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 20px">查询</el-button>
          <el-button size="mini">重置</el-button>
        </div>
      </el-col>
      <el-col>
        <div style="font-size: 14px;">
          <el-row>
            <el-button type="text" @click="dialogFormVisible = true" size="mini">
              <el-button size="small" type="primary" class="el-icon-plus" style="margin-right: 10px;width: 80px;font-size: 14px">
                新增
              </el-button>
            </el-button>

            <el-dialog title="新增" :visible.sync="dialogFormVisible">
              <el-form :model="form" label-position="right">
                <el-form-item
                    label="基本单位："
                    :rules="[
                                { required: true, message: '名称不能为空'}
                              ]"
                    style="margin-left: 85px" size="small"
                >
                  <el-input v-model="input1" placeholder="请输入基本单位（小单位）" style="width: 430px"></el-input>
                </el-form-item>
              </el-form>
              <div>
                <span style="margin-left: 100px">副单位：</span>
                <el-input
                    placeholder="请输入副单位（大单位）"
                    v-model="input1"
                    size="small"
                    style="width: 205px;">
                </el-input>
                <span>=</span>
              </div>
              <el-input placeholder="请输入比例" style="width: 205px;margin-top: 10px;margin-left: 155px" size="small"></el-input>

              <div style="margin-top: 20px">
                <span style="margin-left: 90px">副单位2：</span>
                <el-input
                    placeholder="请输入副单位（大单位）2"
                    v-model="input1"
                    size="small"
                    style="width: 205px;">
                </el-input>
                <span>=</span>
              </div>
              <el-input placeholder="请输入比例2" style="width: 205px;margin-top: 10px;margin-left: 155px" size="small"></el-input>

              <div style="margin-top: 20px">
                <span style="margin-left: 90px">副单位3：</span>
                <el-input
                    placeholder="请输入副单位（大单位）3"
                    v-model="input1"
                    size="small"
                    style="width: 205px">
                </el-input>
                <span>=</span>
              </div>
              <el-input placeholder="请输入比例3" style="width: 205px;margin-top: 10px;margin-left: 155px" size="small"></el-input>

              <el-divider></el-divider>
              <div style="width: 960px;margin: 0;">
                <div slot="footer" class="dialog-footer" style="margin-left: 750px;">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
              </div>
            </el-dialog>
            <!--              <el-button size="small" type="primary">添加类别</el-button>-->
            <el-button size="small">
              <el-dropdown>
                  <span class="el-dropdown-link">
                       批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                 <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item><i class="el-icon-delete"></i>刪除</el-dropdown-item>
                 </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </el-row>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 20px">
          <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="125">
            </el-table-column>
            <el-table-column
                label="#"
                width="85">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="计量单位"
                width="415">
              <template slot-scope="scope">{{ scope.row.number}}</template>
            </el-table-column>
            <el-table-column
                label="基本单位"
                width="165">
              <template slot-scope="scope">{{ scope.row.info}}</template>
            </el-table-column>
            <el-table-column
                label="副单位"
                width="205">
              <template slot-scope="scope">{{ scope.row.date}}</template>
            </el-table-column>
            <el-table-column
                label="副单位2"
                width="205">
              <template slot-scope="scope">{{ scope.row.operator}}</template>
            </el-table-column>
            <el-table-column
                label="副单位3"
                width="205">
              <template slot-scope="scope">{{ scope.row.amount}}</template>
            </el-table-column>
            <el-table-column
                label="操作"
                min-width="100">
              <template slot-scope="scope">
                <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)"
                               title="这是一段内容确定删除吗？">
                  <el-button size="mini"
                             type="danger" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--            <div style="margin-top: 20px">-->
          <!--              <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
          <!--              <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--            </div>-->
        </div>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>
export default {
  name: "MeasuringUnit",
  data(){
    return{
      input1:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      num: 0
    }
  }
}
</script>

<style scoped>

</style>